<template>
  <div>
    <el-col>
      <el-row>
        <p>{{cellName}} 执行状态：<el-tag :type="status">{{statusMap[status]}}</el-tag></p>
      </el-row>
      <el-row>
        <p>可视化执行结果预览：</p>
        <viewer>
          <img
            style="width: 100%; height: 55vh"
            :src="baseUrl[0]"
            alt="preview"/>
        </viewer>
      </el-row>
      <el-row>
        <viewer :images="baseUrl">
          <img id="result" v-for="item in baseUrl" :key="item" :src="item" style="width: 50px; height: 50px; margin-left: 3px" alt="图片预览"/>
<!--          <label for="result">-->
<!--            <img src="../../assets/DAG_instruction.png"  alt="Image loading..."/>-->
<!--          </label>-->
        </viewer>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from 'v-viewer'
export default {
  name: 'VisualizedResult',
  components: {
    Viewer
  },
  props: {
    cellName: {
      type: String,
      default: ''
    },
    baseUrl: [],
    status: {
      type: String,
      default: 'danger'
    }
  },
  data () {
    return {
      // url: 'http://192.168.137.221:8000/media/test.png',
      statusMap: {
        success: '成功',
        danger: '失败',
        info: '待执行'
      }
    }
  }
}
</script>

<style scoped>
p{
  font-size: 20px;
  font-weight: bold;
  color: #313131;
}
::v-deep .el-row{
  padding-bottom: 2vh;
}
viewer:hover{
    opacity: 0.8;
    cursor: zoom-in;
}
</style>
